<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>锥形渐变</title>
</head>

<body>
    <style>
        /* 知识点
        1 使用background的 conic-gradient(a,b,c) abc是各个分组每组有三个元素分别是 颜色 起始角度 终止角度； 组与组之间是渐变的
        2 色盘的颜色是定死的这个百度就好
        3 可以使用 --d 去设定一个Css变量，然后通过 hover 去改变此变量来实现 一些动画效果，其中 Houdini 是一个google 大概四年前 做的动画效果，具体后面可进行学习
        4 css 伪类 before 中的content 写空''  然后inset只要写就是默认占满父元素， inset:Xpx X越大其距离边缘的具体越远 
        
        */
        .box {
            --d: 0deg;
            width: 100px;
            height: 100px;
            border-radius: 50% 50%;
            margin: 0 auto;
            /* background: conic-gradient(#f40 60deg, #000 60deg); 红色一角 其他是黑色 */
            /* background: conic-gradient(#f40 60deg, #0000 60deg); 只有红色 其他透明 #0000 最后一个是透明的意思吧*/
            /* background: conic-gradient(#f40 60deg, #0000 60deg 300deg, #f40 300deg); 先0到60度是红色 然后接一段透明 再从300到360是红色 不写结尾的算作360 */
            background: conic-gradient(#f40 var(--d), #0000 var(--d) calc(360deg - var(--d)), #f40 calc(360deg - var(--d)));
            transition: --d 0.5s;
        }

        /* Houdini API 一个动画 */
        @property --d {
            syntax: '<angle>';
            initial-value: 0deg;
            inherits: false;
        }

        .box:hover {
            --d: 60deg;
        }

        /* 调色盘 锥形渐变就行 */
        .box2 {
            --d: 0deg;
            width: 100px;
            height: 100px;
            border-radius: 50% 50%;
            margin: 20px auto;
            background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
        }
        /* 调色环形 和色盘差不多 知识点inset是content的间隙 */
        .box3 {
            --d: 0deg;
            width: 100px;
            height: 100px;
            border-radius: 50% 50%;
            margin: 20px auto;
            background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
            position: relative;
        }
        .box3::before{
            content: '';
            position: absolute;
            background: #fff;
            border-radius: 50%;
            inset: 5px;
        }
    </style>
    <div class="box"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

</html>